<template >
    <div>
        <!-- 渲染数据 -->
        <h3> 渲染数据{{ mainStore.count }} 或者是 ：{{ mainStore.$state.count }}，计算属性去乘：{{ mainStore.double }}</h3>
        <!-- 操作数据pinia中的数据 -->
        <button @click="mainStore.add(10)">增加</button>

        <h3> 书籍名称：{{ bookStore.bookName }},价格：{{ bookStore.price }}, 计算属性：{{ bookStore.disCount }}</h3>
        <button @click="bookStore.changePrice()">定时涨价</button>
    </div>
</template>

<script setup>
/**
 *   Pinia  状态管理
 *      创建步骤：
 *      1. 安装pinia：yarn add pinia  //  npm install pinia
        2. 在main.js中引入并注册：
            import { createPinia } from 'pinia'
            const pinia = createPinia();
            app.use(pinia);
        3. 创建store：src/store/index.js
        4. 创建组件：src/views/Pinia.vue 并且导入store/index.js  中的useMain
        5. 渲染数据直接点即可：{{ main.count }} 
        6. 注意每次对数据进行修改后需要重启项目  不然有时候不生效。控制台显示安装pina成功就可以，
        7. 修改数据：actions方法  计算属性：getters方法
 */
import { useMain } from '../store/main.js'
import { useBook } from '../store/book.js'
//每一个都是模块
const mainStore = useMain()
const bookStore = useBook()



</script>


<style scoped>
    
</style>